<template>
	<view class="info">
		<!-- banner -->
		<view class="banner-swiper" v-if="swiperList.length>0">
			<swiper class="home-swiper" :current="activeIndex" @change="swiperChange"> 
				<swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="item.cucPictureId">
					<view class="item-image" v-if="item.picturePath && https"><image :src="https+item.picturePath" mode="scaleToFill"></image></view>
				</swiper-item>
			</swiper>
			<!-- <text class="swiper_jb">{{ activeIndex+1 }}/{{ swiperList.length }}</text> -->
		</view>
		
		<view class="zw" v-else>
			<image src="../../static/zwtp1.jpg" mode="scaleToFill"></image>
		</view>

		<!-- 详情内容 -->
		<view class="info-content">
			<view class="sc11">
				<view class="info-content-title">{{ obj.modelName || '' }}</view>
				<view class="car-info-footer-li" @click="liker(obj.isCollect)">
					<view class="car-info-footer-li-icon" style="text-align: center;">
						<u-icon v-if="obj.isCollect == 1" name="star-fill" size="45" color="#f38723" ></u-icon>
						<u-icon v-else name="star" size="45" color="#333"></u-icon>
					</view>
					<view class="car-info-footer-li-text"><text v-if="obj.isCollect == 1">已</text>收藏</view>
				</view>
			</view>
			<view class="info-content-price">
				<view class="info-content-price-l">{{ obj.sellingPrice || '' }}<text>万</text></view>
		<!-- 		<text class="info-content-price-r" @click="gotel()">询问底价</text> -->
			</view>
			<view class="newinfo-content-valuation">
				<view class="newinfo-content-valuation-l">
					<view class="jine">{{ obj.platformEstimatedPrice || '' }}万</view>
					<view class="texts">爱买车估价</view>
				</view>
				<view class="newinfo-content-valuation-c">
					<view class="jine">{{ obj.newCarGuidePrice || '' }}万</view>
					<view class="texts">新车指导价</view>
				</view>
				<view class="newinfo-content-valuation-r">
					<view class="jine">{{(obj.sellingPrice * 0.3).toFixed(2) || ''}}万</view>
					<view class="texts">分期首付</view>
				</view>
			</view>
			<view class="newinfo-content-valuation-">
				<view class="newinfo-content-valuation-dl" @click="goReport">
					<view>
						<image src="../../static/tab/ckbg.png" mode=""></image>
					</view>
					查看报告
				</view>
				<view class="newinfo-content-valuation-dr" @click="goLoan">
					<view>
						<image src="../../static/tab/dkjs.png" mode=""></image>
					</view>
					贷款计算
				</view>
			</view>
			<!-- <view class="info-content-valuation">
				<view class="info-content-valuation-l">爱买车估价<text>{{ obj.platformEstimatedPrice || '' }}万</text></view>
				<view class="info-content-valuation-r" @click="goReport">查看报告></view>
			</view>
			<view class="info-content-guided">
				<view class="info-content-guided-l">新车指导价<text>{{ obj.newCarGuidePrice || '' }}万</text></view>
				<view class="info-content-guided-r" @click="zwkf">新车详情></view>
			</view>
			<view class="info-content-time" v-if="obj.releaseTime">{{ obj.releaseTime | changeDates(5,10) }}发布</view>
			<view class="info-content-loan">
				<view class="info-content-loan-l"><text>分期购车</text>首付{{(obj.sellingPrice * 0.3).toFixed(2) || ''}}万</view>
				<view class="info-content-loan-r" @click="goLoan">贷款计算></view>
			</view> -->
		</view>
		
		<view style="margin-top: 444rpx;">
			<u-sticky :offset-top="offsetTop" h5-nav-height="50">
				<u-tabs :list="listScoll"  :bar-width="130" :height='88' :is-scroll="true" active-color="#002B56" :current="current" @change="tabChange"></u-tabs>
			</u-sticky>
			
		</view>
		<!-- 车辆信息 -->
		<view class="card-info" id="cheliangxinxi">
			<view class="car-title">
				<view class="car-title-l">车辆信息</view>
				<view class="car-title-r"></view>
			</view>
			<view class="car-list">
				<view class="car-list-item rrrr">
					<view class="car-list-item-o">表显里程</view>
					<view class="car-list-item-l">{{ obj.mileage || '' }}万公里</view>
				</view>
				<view class="car-list-item rrrr">
					<view class="car-list-item-o">上牌时间</view>
					<view class="car-list-item-l" v-if="obj.carRegistrationTime">{{ obj.carRegistrationTime | changeDates(0,7) }}</view>
				</view>
				<view class="car-list-item">
					<view class="car-list-item-o">车辆所在地</view>
					<view class="car-list-item-l">{{ obj.cityName || '' }}</view>
				</view>
				<view class="car-list-item rrrr">
					<view class="car-list-item-o">续航里程</view>
					<view class="car-list-item-l">{{ obj.rechargeMileage || '0' }}KM</view>
				</view>
				<view class="car-list-item rrrr">
					<view class="car-list-item-o">电池容量</view>
					<view class="car-list-item-l">{{ obj.batteryCapacity || '0' }}KWh</view>
				</view>
				<view class="car-list-item">
					<view class="car-list-item-o">过户次数</view>
					<view class="car-list-item-l">{{ obj.numberOfTransfers || '0' }}次</view>
				</view>
			</view>
			<view class="car-more" @click="lookerMoer">
				<view class="textDetails">
					
					查看详细参数
					<image src="../../static/cxmm.png" mode=""></image>
				</view>
				
				</view>
		</view>
		
		<!-- 车况分析 -->
		<view class="chart" id="chekuangfenxi">
			<view class="chart-title">
				<text class="chart-title-text">车况分析</text>
			</view>
			
			<view class="chart-content">
				<radar :mData="mData"></radar>
			</view>
			<view class="chart-text">当前车辆<text>{{dataTwo}}</text>,建议您联系商家看车试驾</view>
		</view>
		
		<!-- 车辆实拍 -->
		<view class="card-photo" id="cheliangshipai" v-if="swiperList.length > 0">
			<view class="photo-title">
				<view class="photo-title-l">车辆实拍</view>
				<view class="photo-title-r"></view>
			</view>
			<view class="photo-list">
				<view class="photo-list-item" v-show="index <= showIndex" v-for="(item,index) in swiperList" :key="index"><image :src="https+item.picturePath" mode="scaleToFill"></image></view>
			</view>
			<view class="photo-list-btn" v-if="swiperList.length > 1">
				<view v-if="showIndex == 0" @click="openAll">展开阅读全文 <uni-icons style="margin-left: 10px;" type="arrowdown" size="18" color="#FF6600"></uni-icons></view>
				<view v-else @click="upAll">收起全文 <uni-icons style="margin-left: 10px;" type="arrowup" size="18" color="#FF6600"></uni-icons></view>
			</view>
		</view>
		
		<!-- 卖家推荐 -->
		<view class="sell-recommended" id="sellerxinxi" v-if="obj.ownerMessage">
			<view class="info-title">
				<view class="info-title-l">卖家推荐</view>
				<!-- <view class="info-title-r">查看</view> -->
			</view>
			<view class="sell-recommended-cont">
				<u-read-more show-height="200" color="#FF6600">
					<rich-text :nodes="obj.ownerMessage"></rich-text>
				</u-read-more>
			</view>
		</view>
		

		
		<!-- 市场行情 -->
		<view class="market" id="shichanghangqing">
			<view class="info-title">
				<view class="info-title-l">市场行情</view>
			</view>
			<view class="market-tp">
				<view class="market-tp-li">
					<view class="market-tp-l_title title-color">{{marketObj.provincefinalPrice}}万</view>
					<view class="market-tp-l_text">平均成交价</view>
				</view>
				<view class="market-tp-li">
					<view class="market-tp-l_title">{{marketObj.provinceWithMdel}}辆</view>
					<view class="market-tp-l_text">同车型全网在售</view>
				</view>
			</view>
			<view class="market-more">
				<view class="market-more-item" v-for="item in marketList" :key="item.index">
					<view class="market-more-item-top">
						<view class="market-more-item-top-title">{{item.modelName}}</view>
						<view class="market-more-item-top-price">{{item.finalPrice}}万</view>
					</view>
					<view class="market-more-item-btn">
						<text>{{item.cityName}}</text>
						<text>{{item.carRegistrationTime | changeDates(0,7)}}上牌</text>
						<text>{{item.mileage}}万公里</text>
						<text>成交于{{ item.endTime | changeDates(0,10) }}</text>
					</view>
				</view>
		
			</view>
			<view class="" v-if="!moreMarket  && marketList.length!=0" style="text-align: center; padding: 24rpx 0;">
				没有更多了
			</view>
			<view class="market-btn" v-if="moreMarket" @click="moreMarketList">查看更多<image src="../../static/cxmm.png" mode=""></view>
		</view>
		
		
		<!-- 买家信息 -->
		<view class="sellerInformation" v-if="sourceType==2" @click="TraderInfoDel()">
					<view class="sellerInformationTop">
						<view class="sellerLeft">
							<image :src="https+sellerInformationList.storePhotos" mode="scaleToFill" class="imgage"></image>
						</view>
						<view style="margin-left: 32rpx;margin-top: 10rpx;">
							<view class="name">{{sellerInformationList.traderName}}</view>
							<view class="dpdz">店铺地址：{{sellerInformationList.provName+sellerInformationList.cityName+sellerInformationList.storeAddress}}</view>
						</view>
						<view  class="dpdzright">
							<image src="../../static/qyrz.png" mode=""></image>
						</view>
					</view>
					
				
		
		</view>
		
		<!-- 相关推荐 -->
		<view class="related" id="tuijiancheyuan">
			<view class="info-title">
				<view class="info-title-l">爱买车推荐</view>
				<view class="info-title-tab">
					<u-tabs style="width: 100%;" :bar-width="104" active-color="#002B56" :list="recommendList" :is-scroll="false"
						:current="recommendCurrent" @change="recommendChange"></u-tabs>
				</view>
			</view>
			<view class="car-list">
				<block v-if="list.length>0">
					<view class="tab-list-li" v-for="(item,index) in list" :key="index">
						<navigator :url="`/pages/carInfo/carInfo?item=${encodeURIComponent(JSON.stringify(item))}`" hover-class="none">
							<tab-item :item="item"></tab-item>
						</navigator>
					</view>
					<view class="market-btn" @click="moreCar(recommendCurrent)">查看更多<image src="../../static/cxmm.png" mode=""></view>
				</block>
				<view v-else>
					<null></null>
				</view>
			</view>
			
		</view>
		
		<!-- 虚假信息提示 -->
		<view class="prompt">
			<view class="prompt-l">
				<view class="prompt-l-title">如遇虚假信息，车型不符等，请立即举报</view>
				<view class="prompt-l-text">
					<view class="prompt-l-text-item"><text style="color: red;">*</text>交易前，请仔细检查车况，核对车辆证件；</view>
					<view class="prompt-l-text-item"><text style="color: red;">*</text>交易过程中谨慎支付定金；</view>
					<view class="prompt-l-text-item"><text style="color: red;">*</text>爱买车仅展示车源信息，不参与具体交易过程；</view>
				</view>
			</view>
			<view class="prompt-r">
				<view class="prompt-r-icon">
					<u-icon name="warning" color="#333" size="60"></u-icon>
				</view>
				<view class="prompt-r-text">
					点击举报
				</view>
			</view>
		</view>
		
		<!-- 底部 -->
			<view class="info-footer" @click="zzck()">
				<view style="background: #fff;">
					<image src="../../static/zxck.png" mode=""></image>
					<text>咨询车况</text>
				</view>
				<view class="dj" @click="gotel()">
					<image src="../../static/zxdj.png" mode=""></image>
					<text style="color: #fff;">咨询底价</text>
				</view>
				<!-- <view class="car-info-footer-item">
					<view class="car-info-footer-btn btn-one">
						<u-button type="primary" plain size="medium">
							<u-icon name="chat" size="45"></u-icon>
							咨询车况
						</u-button>
					</view>
					<view class="car-info-footer-btn btn-two" >
						<u-button type="primary" size="medium" @click="gotel()">
							<u-icon name="phone" size="40"></u-icon>
							询问底价
						</u-button>
					</view>
				</view> -->
			</view>
		<!-- 底部 -->
		<!-- <view class="info-footer">
			
			<view class="car-info-footer-li" @click="goLoan">
				<view class="car-info-footer-li-icon"><u-icon name="rmb-circle" size="45" color="#333"></u-icon></view>
				<view class="car-info-footer-li-text">贷款计算</view>
			</view> -->
			<!-- <view class="car-info-footer-item"> -->
			<!-- 	<view class="car-info-footer-btn btn-one">
					<u-button type="primary" plain size="medium">
						<u-icon name="chat" size="45"></u-icon>
						咨询车况
					</u-button>
				</view> -->
	<!-- 			<view class="car-info-footer-btn btn-two" >
					<u-button type="primary" size="medium" @click="gotel()">
						<u-icon name="phone" size="40"></u-icon>
						询问底价
					</u-button>
				</view> -->
			<!-- </view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import API from "@/api/index.js"
	export default{
		data(){
			return {
				moreMarket:true,
				fqprice:"",
				dataTwo:'',
				obj:{},
				https: getApp().globalData.picturePath,
				listScoll: [{
						name: '车辆信息'
					}, {
						name: '车况分析'
					}, {
						name: '车辆实拍',
					},
					{
						name: '卖家信息',
					},
					{
						name: '市场行情',
					},
					{
						name: '推荐车源',
					},
				],
				current: 0,
				list:[],
				showIndex: 0,
				activeIndex: 0,
				swiperList:[],
				mData: [ 
				],
				recommendList: [{
					name: '同价位'
				}, {
					name: '同车系'
				}],
				recommendCurrent: 0,
				itemJson: '',
				marketObj:{
					provinceWithMdel:"",
					provincefinalPrice:"",
				},
				marketList:[],
				platformEstimatedPriceDown:"",
				platformEstimatedPriceUp:"",
				seriesId:'',
				marketListPage:1,
				ownerPhone:"",
				//是否显示车商品信息
				sourceType:'',
				//车商信息
				sellerInformationList:'',
			}
		},
		onLoad(option) {
			this.itemJson = JSON.parse(decodeURIComponent(option.item));
			// console.log("itemJson");
			// console.log(this.itemJson);
			if(this.itemJson){
				this.getCarInfo()
				this.getWithPriceList()
				this.getCarAnalysis()
			}
			
		},
		methods:{
			zwkf(){
				this.$u.toast('功能正在开发中，敬请期待！');
			},
			goReport(){
				let data = {
						// cityId: this.obj.cityId,
						// brandId: this.obj.brandId,
						// seriesId: this.obj.seriesId,
						// modelId: this.obj.modelId,
						// regDate: this.obj.carRegistrationTime.substring(0,10),
						// mile: this.obj.mileage,
						// fullyChargedEndurance: this.obj.rechargeMileage
						usedCarId:this.obj.usedCarId
					}
					API.getUsedCarFastValuation(data).then(res=>{
						if(res.code==200){
							if(this.obj.isReport==0){
								uni.navigateTo({
									url:`/pagesA/assessment/mianfeiReportDetail?data=${encodeURIComponent(JSON.stringify(res.data))}`
								})
							}else{
								uni.navigateTo({
									url:`/pagesB/onTheLine/onTheLine?data=${encodeURIComponent(JSON.stringify(res.data))}`
								})
							}
							
						}else{
							if(res.message == 'token验证失效'){
								res.message ="未登录"
							}
							this.$u.toast(res.message || '请求失败');
						}
					})
					
			},
			gotel(){
				
				let that= this;
				if(that.obj.ownerPhone==''){
					this.$u.toast('暂无联系方式');
				}else{
					uni.makePhoneCall({
					    phoneNumber: that.obj.ownerPhone //仅为示例
					});
				}
				
			},
			zzck(){
				// console.log(zzck)
				// console.log(this.obj);
				var data = {
					sourceType:this.obj.sourceType ,
					uid:'',
				}
				if(this.obj.sourceType==2){
					data.uid = this.obj.traderId
				}else{
					data.uid = this.obj.memberId
				}
				
				API.checkChatroom(data).then(res=>{
					// console.log(res.data)
					uni.navigateTo({
						url:`/pages/carCondition/carCondition?item=${encodeURIComponent(JSON.stringify(res.data))}`
					})
				})
				
			},
			
			liker: function(id){
				if(id == 0){
					this.postAddLiker()
				}else{
					this.postRemoveLiker()
				}
			},
			postAddLiker: function(){
				API.postAddLiker({usedCarId:this.obj.usedCarId}).then(res=>{
					if(res.code == 200){
						this.$u.toast('收藏成功！');
						this.obj.isCollect = 1;
					}else{
						this.$u.toast(res.message  || '请求失败！');
					}
				})
			},
			postRemoveLiker: function(){
				API.postRemoveLiker({usedCarId:this.obj.usedCarId}).then(res=>{
					if(res.code == 200){
						this.$u.toast('已取消收藏！');
						this.obj.isCollect = 0;
					}else{
						this.$u.toast(res.message  || '请求失败！');
					}
				})
			},
			moreMarketList(){

				this.marketListPage = this.marketListPage + 1
				this.getCarMarketList(this.obj.usedCarId,this.marketListPage)
			},
			goLoan(){ //跳转到贷款页面
				uni.navigateTo({
					url: "/pagesA/calculator/dk_calculator?totalAmount="+this.obj.sellingPrice
				})
			}, 
			moreCar(recommendCurrent){
				// console.log(recommendCurrent)
				if(recommendCurrent == 0){
					uni.navigateTo({
						url:`/pagesA/buyCar/buyCar?platformEstimatedPriceDown=${this.platformEstimatedPriceDown}&platformEstimatedPriceUp=${this.platformEstimatedPriceUp}`
					})
				}
				else if(recommendCurrent == 1){
					uni.navigateTo({
						url:`/pagesA/buyCar/buyCar?seriesId=${this.itemJson.seriesId}&brandId=${this.itemJson.brandId}&seriesName=${this.itemJson.seriesName}`
					})
				}
			},
		
			//车辆详情二手车详情-车况分析
			getCarAnalysis(){
				let data = {
					usedCarId: this.itemJson.usedCarId
				}
				API.getCarAnalysis(data).then(res=>{
					if(res.code == 200){
						this.mData = res.data;
						this.dataTwo = res.dataTwo;
					}else{
						this.$u.toast('请求失败');
					}
				})
			},
		    
			//车辆详情二手车详情-市场行情信息
			getCarMarketInfo(usedCarId){
				let data = {
					usedCarId: usedCarId
				}
				API.getCarMarketInfo(data).then(res=>{
					if(res.code == 200){
						this.marketObj = res.data;
					}else{
						this.$u.toast('请求失败');
					}
				})
			},	
			
			//车辆详情二手车详情-市场行情列表分页
			getCarMarketList(usedCarId,marketListPage){
				let data = {
					page: marketListPage,
					limit: 3,
					usedCarId:usedCarId
				}
				API.getCarMarketList(data).then(res=>{
					if(res.code == 200){
						this.marketList =this.marketList.concat(res.data)
						var count = res.count;
						if(this.marketList.length == count ){
							this.moreMarket = false
						}
					}else{
						this.$u.toast('请求失败');
					}
				})
			},	
			
			lookerMoer(){
				let data = {
					modelName: this.itemJson.modelName,
					carRegistrationTime: this.itemJson.carRegistrationTime,
					mileage: this.itemJson.mileage,
					modelId:  this.itemJson.modelId
				}
				uni.navigateTo({
					url:'/pagesB/configurationInfo/configurationInfo?item='+encodeURIComponent(JSON.stringify(data))
				})
			},
			getWithPriceList(){
				let data = {
					page: 1,
					limit: 5,
					platformEstimatedPrice: this.itemJson.platformEstimatedPrice,
					usedCarId: this.itemJson.usedCarId
				}
				API.getWithPriceList(data).then(res=>{
					if(res.code == 200){
						this.list = res.data
						this.platformEstimatedPriceDown = res.dataTwo.platformEstimatedPriceDown
						this.platformEstimatedPriceUp = res.dataTwo.platformEstimatedPriceUp
					}else{
						this.$u.toast('请求失败');
					}
				})
			},
			getWithSeriesList(){
				let data = {
					page: 1,
					limit: 5,
					platformEstimatedPrice: this.itemJson.platformEstimatedPrice,
					seriesId: this.itemJson.seriesId
				}
				API.getWithSeriesList(data).then(res=>{
					if(res.code == 200){
						this.list = res.data
					}else{
						this.$u.toast('请求失败');
					}
				})
			},
			// 获取车辆详细信息
			getCarInfo(){
				let data = {usedCarId: this.itemJson.usedCarId}
				API.getCarInfo(data).then(res=>{
					console.log(res.data)
					this.sourceType = res.data.sourceType;
					this.swiperList = res.data.listPicture;
					//如果车源信息是商家的话  调用获取商家信息的接口
					if(res.data.sourceType==2){
						this.TraderInfo(res.data.traderId)
					}
					if(res.data.listPicture.length == 0){
						for( let i in this.listScoll ){
							if(this.listScoll[i].typeName == '车辆实拍'){
								this.listScoll.splice(i,1)
							}
						}
					}
					
					this.obj = res.data
					this.ownerPhone = res.data.ownerPhone;
					this.sellingPrice = res.data.sellingPrice * 0.3;
					this.getCarMarketInfo(this.obj.usedCarId)
					this.getCarMarketList(this.obj.usedCarId,this.marketListPage)
					if(!res.data.ownerMessage){
						for( let j in this.listScoll ){
							if(this.listScoll[j].typeName == '卖家信息'){
								this.listScoll.splice(j,1)
							}
						}
					}
					
					
				})
			},
			
			//获取商家信息
			TraderInfo(data){
				API.TraderInfo({'traderId':data}).then(res=>{
					// console.log(res.data)
					this.sellerInformationList = res.data;
					
				})
			},
			//跳转商家详情
			TraderInfoDel(){
				// console.log(123)
				uni.navigateTo({
					url:'/pagesB/TraderInfo/TraderInfo?traderId='+encodeURIComponent(JSON.stringify(this.sellerInformationList.traderId))
				})
			},
			recommendChange(index) {
				this.recommendCurrent = index;
				if(index==0){
					this.getWithPriceList()
				}else{
					this.getWithSeriesList()
				}
			},
			swiperChange(e){
				const { current } = e.detail
				this.activeIndex = current
			},
			openAll(){
				this.showIndex = this.swiperList.length
			},
			upAll(){
				this.showIndex = 0
			},
			tabChange(index) {
				// console.log(index)
				this.current = index;
				if (index === 0) {
					// 车辆档案
					uni.pageScrollTo({
						selector: '#cheliangxinxi'
					})
				}else if(index === 1){
					// 车况分析
					uni.pageScrollTo({
						selector: '#chekuangfenxi'
					})
				}else if(index === 2){
					// 车辆实拍
					uni.pageScrollTo({
						selector: '#cheliangshipai'
					})
				}else if(index === 3){
					// 卖家信息
					uni.pageScrollTo({
						selector: '#sellerxinxi'
					})
				}else if(index === 4){
					// 市场行情
					uni.pageScrollTo({
						selector: '#shichanghangqing'
					})
				}else if(index === 5){
					// 推荐车源
					uni.pageScrollTo({
						selector: '#tuijiancheyuan'
					})
				}
			},
		}
	}
</script>


<style>
	.u-size-medium {
		padding: 0px 10rpx !important;
	}
</style>
<style scoped lang="scss">
	.photo-title-l{
		    font-family: PingFangSC-Medium;
		    font-size: 36rpx;
			    color: #2C2C2C;
	}
	.dpdzright{
		image{
			width: 12rpx;
			height: 22rpx;
			    margin-top: 31rpx;
			    margin-left: 30rpx;
		}
	}	
	.textDetails{
		width: 190rpx;
		margin: auto;
		display: flex;
	}
	.rrrr{
		border-right: 1px solid #efefef;
	}
	.info-title-l{
		font-family: PingFangSC-Medium;
		font-size: 36rpx;
		color: #2C2C2C;
	}
	.chart-title-text{
		font-family: PingFangSC-Medium;
		font-size: 36rpx;
		color: #2C2C2C;
	}
	.car-list-item-o{
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #999999;
	}
	.car-list-item-l{
		font-family: PingFangSC-Regular;
		font-size: 32px;
		color: #2C2C2C;
	}
	
	.market-btn{
		text-align: center;
		line-height: 120rpx;
		height: 120rpx;
		 width: 190rpx;
		 display: flex;
		margin: auto;
		font-size: 28rpx;
		color: #2C2C2C;
		image{
			width: 10rpx;
			height: 10rpx;
			margin-left: 20rpx;
			margin-top: 54rpx;
			// display: block;
		}
	}
	.info{
		position: relative;
		padding-bottom: 130rpx;
		box-sizing: border-box;
		.banner-swiper{
			width: 100%;
			height: 66vw;
			position: relative;
			.home-swiper{
				height: 100%;
				.swiper-item{
					height: 100%;
					.item-image{
						height: 100%;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.swiper_jb{
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				font-size: 28rpx;
				color: #fff;
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				background-color: rgba(0,0,0,0.5);
				z-index: 5;
			}
		}
		.dj{
			background-color: #002B56;
		}
		.info-footer{
			position: fixed;
			width: 100%;
			bottom: 0;
			right: 0;
			z-index: 999;
			box-sizing: border-box;
			// background-color: #fff;
			display: flex;
			justify-content:space-around;
			align-items: center;
			height: 126rpx;
			background: #fff;
			view{
				width: 47%;
				height: 88rpx;
				line-height: 88rpx;
				border: 1px solid #002B56;
				border-radius: 5rpx;
				display: flex;
			}
			text{
				padding-left: 10rpx;
			}
			image{
				    width: 35rpx;
				    height: 35rpx;
					padding-left: 80rpx;
					    margin-top: 26rpx;
			}
			// .car-info-footer-li{
			// 	width: 150rpx;
			// 	height: 100%;
			// 	text-align: center;
			// 	padding: 20rpx 0rpx;
			// 	box-sizing: border-box;
			// 	.car-info-footer-li-text{
			// 		color: #333;
			// 		font-size: 26rpx;
			// 	}
			// }
			// .car-info-footer-item{
			// 	flex: 1;
			// 	display: flex;
			// 	justify-content: space-between;
			// 	align-items: center;
			// 	.car-info-footer-btn{
			// 		flex: 1;
			// 		height: 100%;
			// 		color: #fff;
			// 		text-align: center;
			// 	}
			// }
		}
		
		.related{
			padding: 0rpx $uni-widthspace;
			// margin: $uni-widthspace;
			margin-top: 7rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: #fff;
			.car-list{
				.tab-list-li{
					border-bottom: 2rpx solid #eee;
					padding: 20rpx 0rpx;
					box-sizing: border-box;
				}
			}
		}
		
		.market{
			padding: 0rpx $uni-widthspace;
			// margin: $uni-widthspace;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: #fff;
			margin-top: 7rpx;
			.market-tp{
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// border-bottom: 2rpx solid #eee;
				.market-tp-li{
					flex: 1;
					text-align: center;
					.market-tp-l_title{
						font-size: 40rpx;
						font-weight: 500;
						color: $car-basic-color;
					}
					.title-color{
						color: $car-bg-color !important;
					}
					.market-tp-l_text{
						font-size: 26rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}
			.market-more{
				.market-more-item{
					padding: 20rpx 0rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #eee;
					.market-more-item-top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						color: #333;
						
						.market-more-item-top-title{
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
							flex: 1;
						}
						.market-more-item-top-price{
							color: $car-bg-color;
							margin-left: 20rpx;
						}
					}
					.market-more-item-btn{
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 24rpx;
						color: #999;
						text-align: center;
					}
				}
			}
		}
		
		
		//店铺信息
		.sellerInformation{
			padding: 0rpx $uni-widthspace;
			// margin: $uni-widthspace;
			margin-top: 7rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: #fff;
			.sellerInformationTop{
				    display: flex;
				    padding-top: 36rpx;
				    height: 162rpx;

				.sellerLeft{
					width: 98rpx;
					height: 98rpx;
					border-radius: 50%;
					.imgage{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.name{
					font-size: 30rpx;
					font-weight: 500;
					width: 512rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					
				}
				.imges1{
					width: 80rpx;
					height: 25rpx;
				}
				.bot{
					margin-top: 10rpx;
					width: 500rpx;
					display: flex;
					justify-content: space-between;
				}
			}
			.dpdz{
				font-size: 24rpx;
				padding: 16rpx 0 0;
				width: 512rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				
			}
		}
		.prompt{
			padding: 20rpx $uni-widthspace;
			margin: $uni-widthspace;
			box-sizing: border-box;
			border-radius: 12rpx;
			background-color: #FFC94B;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.prompt-l{
				flex: 1;
				color: #333;
				.prompt-l-title{
					font-size: 28rpx;
				}
				.prompt-l-text{
					font-size: 26rpx;
					.prompt-l-text-item{
						margin-top: 6rpx;
					}
				}
			}
			.prompt-r{
				text-align: center;
				font-size: 28rpx;
				margin-left: 20rpx;
				color: #333;
			}
		}
		
		
		.info-content{
			// background-color: $uni-bg-color;
			// padding: 0 $uni-widthspace $uni-widthspace ;
			// box-sizing: border-box;
			
			// margin-bottom: 7rpx;
			    background-color: #ffffff;
			    padding: 20rpx 32rpx 24rpx;
			    box-sizing: border-box;
			    margin-bottom: 7rpx;
			    position: absolute;
			    width: 100%;
			    top: 378rpx;
			    border-radius: 40rpx 40rpx 0 0;
			
			.info-content-title{
				font-family: PingFangSC-Medium;
				font-size: 36rpx;
				color: #2C2C2C;
				font-weight: 500;
				line-height: 48rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				padding-top: 10rpx;
				    width: 600rpx;
			}
			.info-content-price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				// margin-top: $car-top-height;
				color: $car-bg-color;
				.info-content-price-l{
					font-size: 40rpx;
					color: #FF552E;
					margin-top: 18rpx;
					margin-bottom: 18rpx;
					font-weight: 550;
					text{
						font-size: 26rpx;
						
					}
				}
				.info-content-price-r{
					padding: 8rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #fff;
					font-weight: 500;
					background-color: $car-bg-color;
					border-radius: 8rpx;
				}
			}
			.info-content-valuation{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: $car-top-height;
				font-size: 28rpx;
				color: $uni-text-color;
				.info-content-valuation-l{
					text{
						font-size: 24rpx;
						font-weight: 500;
						margin-left: $car-top-height;
					}
				}
			}
			.info-content-guided{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: $car-top-height;
				font-size: 28rpx;
				color: $uni-text-color;
				.info-content-guided-l{
					text{
						font-size: 24rpx;
						font-weight: normal;
						margin-left: $car-top-height;
					}
				}
			}
			.info-content-time{
				font-size: 28rpx;
				color: $uni-text-color;
				margin-top: $car-top-height;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #eee;
			}
			.info-content-loan{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				box-sizing: border-box;
				font-size: 28rpx;
				color: $uni-text-color;
				text{
					padding: 4rpx 16rpx;
					box-sizing: border-box;
					font-size: 26rpx;
					color: #fff;
					background-color: #3F536E;
					margin-right: $car-top-height;
					border-radius: 8rpx;
				}
			}
		}
		
		// .tab-card{
		// 	display: flex;
		// 	width: 100%;
		// 	border-bottom: 2rpx solid #e7e7e7;
		// 	background-color: #fff;
		// 	box-sizing: border-box;
		// 	// margin-top: $uni-widthspace;
		// 	.tab-scroll{
		// 		flex: 1;
		// 		overflow: hidden;
		// 		box-sizing: border-box;
		// 		.tab-scroll_box{
		// 			display: flex;
		// 			align-items: center;
		// 			flex-wrap: nowrap;//不换行
		// 			height: 90rpx;
		// 			box-sizing: border-box;
		// 			.tab-scroll_item{
		// 				flex-shrink: 0;
		// 				padding: 0 20rpx;
		// 				color: #333;
		// 				font-size: 32rpx;
		// 				&.active{
		// 					color: $car-basic-color;
		// 				}
		// 				.tab-scroll_item-icon{
		// 					width: 70%;
		// 					background-color: $uni-bg-color;
		// 					height: 4rpx;
		// 					margin: 0 auto;
		// 					border-radius:8rpx;
		// 					margin-top: 12rpx;
		// 					&.tabActive{
		// 						background-color: $car-basic-color;
		// 					}
		// 				}
		// 			}
		// 		}
		// 	}
		// }
		
		.card-info{
			padding: 0rpx $uni-widthspace;
			// margin: $uni-widthspace;
			margin-top: 7rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: $uni-bg-color;
			.car-title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0rpx;
				box-sizing: border-box;
				font-weight: 500;
				color: $car-basic-color;
				// border-bottom: 2rpx solid #eee;
				font-size: 36rpx;
				color: #2C2C2C;
			}
			.car-list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				.car-list-item{
					width: 33.33%;
					text-align: center;
					font-size: 26rpx;
					color: #999;
					margin-top: 30rpx;
					.car-list-item-l{
						margin-top: 10rpx;
						color: $uni-text-color;
						font-size: 32rpx;
					}
				}
			}
			.car-more{
				text-align: center;
				font-size: 28rpx;
				color: $uni-text-color;
				padding: 20rpx 0rpx;
				box-sizing: border-box;
				border-top: 2rpx solid #eee;
				image{
					width: 8rpx;
					height: 12rpx;
					margin-left: 10rpx;
					margin-top: 15rpx;
				}
			}
		}
		
		.chart{
			padding: 0rpx $uni-widthspace 10rpx;
			// margin: $uni-widthspace;
			// margin-top: 7rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: $uni-bg-color;
			margin-bottom: 1rpx;
			margin-top: 10rpx;
			.chart-title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-weight: 500;
				color: $car-basic-color;
				// border-bottom: 2rpx solid #eee;
				.chart-title-btn{
					padding: 8rpx 20rpx;
					box-sizing: border-box;
					color: #fff;
					border-radius: 8rpx;
					background-color: $car-bg-color;
					font-size: 28rpx;
				}
			}
			.chart-text{
				padding: 10rpx 0 10rpx;
				background: #FFF6EF;
				text-align: center;
				margin: auto;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #333;
				text{
					color: $car-bg-color;
				}
			}
		}
		
		.card-photo{
			padding: 0rpx $uni-widthspace;
			// margin: $uni-widthspace;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: $uni-bg-color;
			    margin-top: 10rpx;
			.photo-title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-weight: 500;
				color: $car-basic-color;
				border-bottom: 2rpx solid #eee;
			}
			.photo-list{
				.photo-list-item{
					width: 100%;
					height: 66vw;
					margin-bottom: 10rpx;
					margin-top: 10rpx;
					&:last-of-type{
						margin-bottom: 0rpx;
					}
					image{
						 width:100%;
						 height: 100%;
					}
				}
			}
			.photo-list-btn{
				text-align: center;
				font-size: 28rpx;
				color: $car-bg-color;
				padding-bottom: 30rpx;
				box-sizing: border-box;
			}
		}
		
		.sell-recommended{
			padding: 0rpx $uni-widthspace;
			margin: $uni-widthspace;
			box-sizing: border-box;
			border-radius: 10rpx;
			background-color: $uni-bg-color;
			.sell-recommended-cont{
				padding: 20rpx 0rpx;
				box-sizing: border-box;
			}
		}
		
		
	}
	
	
	.info-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: 500;
		color: $car-basic-color;
		// border-bottom: 2rpx solid #eee;
		.info-title-r{
			padding: 8rpx 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #fff;
			font-weight: 500;
			background-color: $car-bg-color;
			border-radius: 8rpx;
		}
		.info-title-tab{
			width: 300rpx;
		}
	}
	.zw{ 
		width: 100%;
		height: 66vw;
		background-color: #efefef;
		display: flex;
		align-items: center;
		justify-content: center;
		fong-size:30rpx;
		color: #999;
	}
	.zw image{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	
	
	//修改新样式
	.newinfo-content-valuation{
		display: flex;
		justify-content: space-between;
		margin-top: 36rpx
		;
	}
	.newinfo-content-valuation-l,.newinfo-content-valuation-c{
		
		border-right: 1px solid #EFEFEF;
	}
	.newinfo-content-valuation-l,.newinfo-content-valuation-c,.newinfo-content-valuation-r{
		width: 33%;
		text-align: center;
	}
		
	.jine{
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #999999;
	}
	.texts{
		font-family: PingFangSC-Medium;
		font-size: 28rpx;
		color: #2C2C2C;
		margin-top: 10rpx;
		font-weight: 500;
	}
	.newinfo-content-valuation-{
		display: flex;
		justify-content: space-between;
		margin-top: 35rpx;
		margin-bottom: 20rpx;
	}
	.newinfo-content-valuation-dl{
		width: 49%;
		height: 121rpx;
		background: #F4F6F8;
		text-align: center;
		font-size: 24rpx;
		color: #002B56;
		image{
			width: 50rpx;
			height: 48rpx;
			margin-top: 20rpx;
		}
	}
	.newinfo-content-valuation-dr{
		width: 49%;
		text-align: center;
		height: 121rpx;
		background: #F4F6F8;
		font-size: 24rpx;
		color: #002B56;
		image{
			width: 50rpx;
			height: 48rpx;
			margin-top: 20rpx;
		}
	}
	.sc11{
		display: flex;
		justify-content: space-between;
		margin-top: 16rpx;
	}
</style>
